<template>
	<view class="my-picker flexc">
		<view class="picker-title flexr align-center justify-center">
			选择日期
			<image class="close" src="@/static/close.png" @click="emits('onCancel')"></image>
		</view>
		<picker-view class="flex-1 flexr justify-space-around"
			:value="value"
			@change="onPickerChange">
			<picker-view-column class="picker-column">
				<view class="picker-row" v-for="(item, index) in years" :key="index">
					{{item}}年
				</view>
			</picker-view-column>
			<picker-view-column class="picker-column">
				<view class="picker-row" v-for="(item, index) in months" :key="index">
					{{item}}月
				</view>
			</picker-view-column>
			<picker-view-column class="picker-column">
				<view class="picker-row" v-for="(item, index) in days" :key="index">
					{{item}}日
				</view>
			</picker-view-column>
		</picker-view>
		<view class="btns flexr justify-center">
			<view class="btn cancel-button" @click="emits('onCancel')">
				取消
			</view>
			<view class="btn primary-button" @click="onConfirm">
				确定
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
	show: false,
	years: {
		type: Array,
		defaut: () => ([]),
	},
	months: {
		type: Array,
		defaut: () => ([]),
	},
	days: {
		type: Array,
		defaut: () => ([]),
	},
	val: {
		type: Array,
		default: () => ([0, 0, 0]),
	},
})
const emits = defineEmits(['onCancel', 'onConfirm'])
// const date = new Date();
// const years = ref([]);
// const year = ref(date.getFullYear());
// const months = ref([]);
// const month = ref(date.getMonth() + 1);
// const days = ref([]);
// const day = ref(date.getDate());
const value = ref([0,0,0]);
watch(() => props.show, (show) => {
	if (show) {
		value.value = props.val;
	}
});
watch(() => props.val, (val) => {
	value.value = val;
});

// const yearsInit = [];
// const monthsInit = [];
// const daysInit = [];
// for (let i = 1990; i <= date.getFullYear(); i++) {
// 	yearsInit.push(i)
// }
// years.value = yearsInit;
// for (let i = 1; i <= 12; i++) {
// 	monthsInit.push(i)
// }
// months.value = monthsInit;
// for (let i = 1; i <= 31; i++) {
// 	daysInit.push(i)
// }
// days.value = daysInit;

function onPickerChange({detail}) {
	value.value = detail.value;
	console.log(detail.value)
}
function onConfirm() {
	const [yearIndex, monthIndex, dayIndex] = value.value;
	const year = props.years[yearIndex];
	const month = props.months[monthIndex];
	const day = props.days[dayIndex];
	emits('onConfirm', `${year}-${month}-${day}`);
}

</script>

<style lang="scss">
.my-picker {
	height: 680rpx;
	box-sizing: border-box;
	background-color: white;
	overflow: hidden;
	border-top-right-radius: 30rpx;
	border-top-left-radius: 30rpx;
	.picker-title {
		height: 112rpx;
		background-color: rgba(250, 250, 250, 1);
		color: $text-color1;
		font-size: 32rpx;
		position: relative;
		margin-bottom: 20rpx;
		min-height: 112rpx;
		.close {
			width: 50rpx;
			height: 50rpx;
			padding: 10rpx;
			box-sizing: border-box;
			position: absolute;
			right: 25rpx;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.picker-column {
		width: 200rpx;
	}
	.picker-row {
		height: 80rpx;
		text-align: center;
	}
	.btns {
		margin-top: 20rpx;
		.btn {
			margin-top: 0 !important;
			width: 300rpx;
		}
		.btn + .btn {
			margin-left: 30rpx;
		}
	}
}
</style>
